<template>
  <div class="container" style="margin-bottom: 50px">
    <p class="title">
      申请表详情
      <el-button
        type="primary"
        class="btn"
        @click="$router.back()"
      >返回</el-button>
    </p>
    <el-form ref="form" label-width="80px" style="width: 80%">
      <el-form-item label="订单信息">
        <label for="">申请时间: </label> <span>{{ info.applyDate }}</span><br>
        <label for="">用户ID: </label> <span>{{ info.userId }}</span><br>
        <label for="">城市: </label><span>{{ info.city }}</span><br>
        <label for="">修理厂名称: </label><span>{{ info.repairName }}</span><br>
        <label for="">修理厂负责人: </label><span>{{ info.repairUser }}</span><br>
        <label for="">负责人联系电话: </label><span>{{ info.repairMobile }}</span><br>
        <label for="">修理厂业务对接人: </label><span>{{ info.repairBusinessUser }}</span><br>
        <label for="">对接人联系电话: </label><span>{{ info.repairBusinessMobile }}</span><br>
        <label for="">修理厂详细地址: </label><span>{{ info.address }}</span><br>
        <label for="">维修资质证书: </label><span>
          <div class="box">
            <div class="box-item">
              <img v-if="info.maintenanceCertificateUrl1" :src="info.maintenanceCertificateUrl1" @click="select(info.maintenanceCertificateUrl1)">
              <div v-else class="no">未上传</div>
              <p class="tips">证书1</p>
            </div>
            <div class="box-item">
              <img v-if="info.maintenanceCertificateUrl2" :src="info.maintenanceCertificateUrl2" @click="select(info.maintenanceCertificateUrl2)">
              <div v-else class="no">未上传</div>
              <p class="tips">证书2</p>
            </div>
            <div class="box-item">
              <img v-if="info.maintenanceCertificateUrl3" :src="info.maintenanceCertificateUrl3" @click="select(info.maintenanceCertificateUrl3)">
              <div v-else class="no">未上传</div>
              <p class="tips">证书3</p>
            </div>
          </div> </span><br>
      </el-form-item>
      <el-form-item label="维修业务 / 工位数" label-width="80px">
        <label for="">机修: </label> <span>{{ info.partNumber }} 个</span><br>
        <label for="">钣喷: </label> <span>{{ info.coinSprayNumber }} 个</span><br>
        <label for="">烤漆房: </label> <span>{{ info.coinSprayNumber }} 个</span><br>
        <label for="">烤漆房: </label> <span>{{ info.beautyNumber }} 个</span><br>
      </el-form-item>
      <el-form-item label="维修专用工具配置" label-width="80px">
        <label for="">元征举升机: </label>
        <span>{{ info.lifterNumber }} 个</span><br>
        <label for="">X431诊断设备: </label>
        <span>{{ info.x431EquipmentNumber }} 个</span><br>
        <label for="">元征四轮定位仪数量: </label>
        <span>{{ info.alignerNumber }} 个</span><br>
        <label for="">元征轮胎拆装机数量: </label>
        <span>{{ info.erectorNumber }} 个</span><br>
        <label for="">元征轮胎平衡机数量: </label>
        <span>{{ info.tyreBalancerNumber }} 个</span><br>
        <label for="">元征空压机数量: </label>
        <span>{{ info.airCompressorNumber }} 个</span><br>
        <label for="">元征自动变速箱清洗机数量: </label>
        <span>{{ info.cleaningMachineNumber }} 个</span><br>
        <label for="">元征喷油嘴清洗检测仪数量: </label>
        <span>{{ info.cleaningDetectorNumber }} 个</span><br>
        <label for="">元征ADAS系列数量: </label>
        <span>{{ info.adasSeriesNumber }} 个</span><br>
        <label for="">元征OBD技师盒子数量: </label>
        <span>{{ info.boxNumber }} 个</span><br>
      </el-form-item>
      <el-form-item label="维修厂服务范围" label-width="120px">
        <span
          style="margin-left: 100px"
        >{{ ["全市", "不限", "服务半径"][info.repairScopeType] }} </span><br>
      </el-form-item>
      <el-form-item label="是否有救援车或合作救援公司" label-width="200px">
        <span
          style="margin-left: 30px"
        >{{ ["是", "否"][info.isRescue] }}
        </span>
      </el-form-item>
      <!-- <el-form-item label="是否愿意每一单延保送一次保养" label-width="220px">
        <span style="margin-left: 40px">
          {{ ["是", "否"][info.isMaintenance] }}</span>
      </el-form-item> -->

      <el-form-item label="开票支持类型" label-width="180px">
        <span style="margin-left: 44px">{{ info.invoiceType }}</span>
      </el-form-item>
      <el-form-item label="图片资料上传" label-width="200px">
        <div class="box">
          <div class="box-item">
            <img :src="info.businessLicenseUrl" @click="select(info.businessLicenseUrl)">
            <p class="tips">营业执照</p>
          </div>
          <div class="box-item">
            <img :src="info.doorHeadUrl" @click="select(info.doorHeadUrl)">
            <p class="tips">门头招牌</p>
          </div>
          <div class="box-item">
            <img :src="info.workshopUrl" @click="select(info.workshopUrl)">
            <p class="tips">厂房</p>
          </div>
        </div>
        <div class="box">
          <div class="box-item">
            <img v-if="info.maintenanceAreaUrl1" :src="info.maintenanceAreaUrl1" @click="select(info.maintenanceAreaUrl1)">
            <div v-else class="no">未上传</div>
            <p class="tips">维修功能区1</p>
          </div>
          <div class="box-item">
            <img v-if="info.maintenanceAreaUrl2" :src="info.maintenanceAreaUrl2" @click="select(info.maintenanceAreaUrl2)">
            <div v-else class="no">未上传</div>
            <p class="tips">维修功能区2</p>
          </div>
          <div class="box-item">
            <img v-if="info.maintenanceAreaUrl3" :src="info.maintenanceAreaUrl3" @click="select(info.maintenanceAreaUrl3)">
            <div v-else class="no">未上传</div>
            <p class="tips">维修功能区3</p>
          </div>
        </div>
        <div class="box">
          <div class="box-item">
            <img v-if="info.stationUrl1" :src="info.stationUrl1" @click="select(info.stationUrl1)">
            <div v-else class="no">未上传</div>
            <p class="tips">工位1</p>
          </div>
          <div class="box-item">
            <img v-if="info.stationUrl2" :src="info.stationUrl2" @click="select(info.stationUrl2)">
            <div v-else class="no">未上传</div>
            <p class="tips">工位2</p>
          </div>
          <div class="box-item">
            <img v-if="info.stationUrl3" :src="info.stationUrl3" @click="select(info.stationUrl3)">
            <div v-else class="no">未上传</div>
            <p class="tips">工位3</p>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <el-dialog title="" :visible.sync="dialogVisible" width="40%">
      <img :src="previewUrl" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      previewUrl: '',
      info: {
        orderId: 36, // 订单id
        orderNo: 'CBS04202108250000004', // 订单编号
        cbsOrderNo: '8ab04be29d9a48a4bc9d4a89bd197c64', // 查博士订单编号
        creatTime: null, // 创建时间
        packageType: 101, // 检测套餐 101-事故排查检测,102-重要部件检测,103-全面检测
        address: '广东省深圳市龙华区龙华汽车站', // 上门检测地址
        travelCost: 95, // 上门交通费
        payWay: 0, // 支付方式 0-支付宝，1-微信，2-积分
        amount: 294, // 消费金额
        thirdTradeNo: '2021082522001489241417543560', // 支付订单号
        payTime: '2021-08-25 18:28:57', // 支付时间
        orderStatus: 102, // 报告状态 101-待付款,102-待检测,103-检测中,104-已检测,105-订单取消
        reportCreateTime: null, // 报告生成时间
        vin: 'LGXC76C34J0080165', // VIN
        imgUrl:
          'https://ecar-test.oss-cn-shenzhen.aliyuncs.com/ecar/app/vehicleTravel/8f712770-590a-4fd7-833b-2135b405b065.jpg', // 行驶证图片
        vehicleNo: '粤BF65732', // 车牌号
        isUser: 0, // 使用性质 0-非营运,1-营运,2-营转非,3-租赁,4-教练
        registerDate: '2021-03-01', // 初登日期
        brandModel: null, // 品牌车型
        userId: 148, // 用户id
        roleType: 0, // 角色类型：0普通用户 1经纪人 2城市合伙人 3品牌合伙人
        name: 'xufenyong', // 联系人
        mobile: '14718099410', // 手机号
        refundType: null,
        refundTime: null, // 退款时间
        refundAmount: null, // 退款金额
        refundTradeNo: null,
        reportUrl:
          'https://api.chaboshi.cn/new_report/show_reportMobile?userid=3449184&orderid=58d181b5003b4158b6025c034a30d0db&timestamp=1600064340038&nonce=2d90cb0a-f652-11ea-a277-309c23b16ffa&signature=IYDKV4tuLsGdddZfP1b8KWXBOg4%3D' // 报告链接
      }
    }
  },
  created() {
    this.$get(
      `/web/recruitSales/getDetails?recruitSalesId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.info = res.data.data
      } else {
        this.$message.error(res.data.message)
      }
    })
  },
  methods: {
    select(url) {
      this.dialogVisible = true
      this.previewUrl = url
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
      text-align: left;
      width: 800px;
    }
  }

  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn {
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 300px;
    padding-left: 150px;
    display: inline-block;
    text-align: left;
    margin-right: 300px;
  }
  .box {
    display: flex;
    justify-content: space-evenly;
    img {
      width: 200px;
      height: 120px;
      cursor: pointer;
    }
    .no {
      width: 200px;
      height: 120px;
      font-size: 16px;
      text-align: center;
      border: 1px solid #ccc;
      line-height: 120px;
    }
    .tips {
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>

